<template>
  <div>
    <transition name="el-zoom-in-center">
      <div class="jsbos-preview-main authorize-bd">
        <div class="jsbos-common-page-header">
          <el-page-header @back="goBack" :content="title" />
          <div class="options">
            <el-button @click="goBack">{{
              $t("common.cancelButton")
            }}</el-button>
          </div>
        </div>
        <div class="jsbos-flex-main">
          <el-tabs
            v-model="tabActiveName"
            @tab-click="handleClick"
            class="jsbos-flex-tabs"
          >
            <el-tab-pane label="按钮权限" name="buttonAuthorize">
              <ButtonAuthorizeListDrawer
                v-if="buttonAuthorizeListDrawer"
                ref="buttonAuthorizeList"
              />
            </el-tab-pane>
            <el-tab-pane label="列表权限" name="columnAuthorize">
              <ColumnAuthorizeListDrawer
                v-if="columnAuthorizeListDrawer"
                ref="ColumnAuthorizeList"
              />
            </el-tab-pane>
            <el-tab-pane label="数据权限" name="dataAuthorize">
              <DataAuthorizeListDrawer
                v-if="dataAuthorizeListDrawer"
                ref="DataAuthorizeList"
              />
            </el-tab-pane>
            <el-tab-pane label="表单权限" name="formAuthorize">
              <FormAuthorizeListDrawer
                v-if="formAuthorizeListDrawer"
                ref="FormAuthorizeList"
              />
            </el-tab-pane>

            <el-tab-pane label="角色信息" name="roleAuthorize">
              <div class="jsbos-common-layout-main jsbos-flex-main">
                <jsbos-table
                  v-loading="listLoading"
                  :data="roleTreeList"
                  :border="true"
                >
                  <el-table-column
                    prop="fullName"
                    label="角色名称"
                    width="200"
                  />
                  <el-table-column prop="enCode" label="角色编码" width="150" />
                  <el-table-column
                    prop="type"
                    label="角色类型"
                    width="70"
                    :align="'center'"
                  />
                  <el-table-column
                    prop="organizeInfo"
                    label="所属组织"
                    min-width="150"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="creatorTime"
                    label="创建时间"
                    :formatter="jsbos.tableDateFormat"
                    width="120"
                  />
                  <el-table-column
                    prop="sortCode"
                    label="排序"
                    width="70"
                    :align="'center'"
                  />
                  <el-table-column
                    prop="enabledMark"
                    label="状态"
                    width="70"
                    :align="'center'"
                  >
                    <template slot-scope="scope">
                      <el-tag
                        :type="
                          scope.row.enabledMark == 1 ? 'success' : 'danger'
                        "
                        disable-transitions
                      >
                        {{
                          scope.row.enabledMark == 1 ? "正常" : "停用"
                        }}</el-tag
                      >
                    </template>
                  </el-table-column>
                </jsbos-table>
              </div>
            </el-tab-pane>

            <el-tab-pane label="人员列表" name="userAuthorize">
              <div class="jsbos-common-layout-main jsbos-flex-main">
                <jsbos-table v-loading="listLoading" :data="userTreeList">
                  <el-table-column prop="code" label="工号" width="100" />
                  <el-table-column prop="realName" label="姓名" width="100" />
                  <el-table-column prop="account" label="账号" width="100" />
                  <el-table-column
                    prop="gender"
                    label="性别"
                    width="90"
                    :align="'center'"
                    sortable
                  >
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.gender == 1
                          ? "男"
                          : scope.row.gender == 2
                          ? "女"
                          : "保密"
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="mobilePhone"
                    label="手机"
                    width="120"
                  />
                  <el-table-column
                    prop="organize"
                    label="所属组织"
                    min-width="200"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="creatorTime"
                    label="创建时间"
                    :formatter="jsbos.tableDateFormat"
                    width="120"
                  />
                  <el-table-column
                    prop="sortCode"
                    label="排序"
                    width="70"
                    :align="'center'"
                  />
                  <el-table-column
                    prop="enabledMark"
                    label="状态"
                    width="70"
                    :align="'center'"
                  >
                    <template slot-scope="scope">
                      <el-tag
                        type="success"
                        disable-transitions
                        v-if="scope.row.enabledMark == 1"
                        >正常
                      </el-tag>
                      <el-tag
                        type="warning"
                        disable-transitions
                        v-else-if="scope.row.enabledMark == 2"
                        >锁定
                      </el-tag>
                      <el-tag type="danger" disable-transitions v-else
                        >禁用</el-tag
                      >
                    </template>
                  </el-table-column>
                </jsbos-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import ButtonAuthorizeListDrawer from "./components/buttonAuthorize/home";
import ColumnAuthorizeListDrawer from "./components/columnAuthorize/home";
import DataAuthorizeListDrawer from "./components/dataAuthorize/home";
import FormAuthorizeListDrawer from "./components/formAuthorize/home";
import { getButtonAuthorizeList } from "@/api/system/buttonAuthorize";
import { getColumnAuthorizeList } from "@/api/system/columnAuthorize";
import { getFieldNameList } from "@/api/system/menu";
import { getDataSourceListAll } from "@/api/systemData/dataSource";
import { getFormAuthorizeList } from "@/api/system/formAuthorize";
import { getRoleListByMenuId } from "@/api/permission/role";
import { getUserListByMenuId } from "@/api/permission/userSetting";
import DataSchemeForm from "./components/dataAuthorize/DataSchemeForm.vue";
import DataAuthorizeForm from "./components/dataAuthorize/DataAuthorizeForm.vue";
import DataConnectForm from "./components/connectForm/index.vue";
export default {
  components: {
    DataSchemeForm,
    DataAuthorizeForm,
    DataConnectForm,
    ButtonAuthorizeListDrawer,
    ColumnAuthorizeListDrawer,
    DataAuthorizeListDrawer,
    FormAuthorizeListDrawer,
  },
  data() {
    return {
      tabActiveName: "buttonAuthorize",
      dataAuthorizeListDrawer: false,
      buttonAuthorizeListDrawer: false,
      columnAuthorizeListDrawer: false,
      formAuthorizeListDrawer: false,
      dataAuthorizeListDrawer: false,
      title: "",
      moduleId: "",
      fullName: "",
      listLoading: false,
      menuType: 2,
      roleTreeList: [], //角色列表
      userTreeList: [], //人员列表
      listQuery: {
        currentPage: 1,
        pageSize: 200000,
      },
    };
  },
  methods: {
    init(moduleId, fullName, type) {
      this.title = fullName + "-菜单权限";
      this.fullName = fullName;
      this.menuType = type;
      this.moduleId = moduleId;
      this.tabActiveName = "buttonAuthorize";
      this.$nextTick(() => {
        if (this.$refs["DataConnectForm"]) {
          this.$refs["DataConnectForm"].dataForm.dataSelect = "";
        }
        this.listLoading = true;
        this.buttonAuthorizeListDrawer = true;
        this.$nextTick(() => {
          this.$refs.buttonAuthorizeList.init(this.moduleId, fullName);
        });
      });
    },

    goBack() {
      this.$emit("close");
    },
    handleClick() {
      const activeTab = this.tabActiveName;
      if (activeTab === "buttonAuthorize") {
        this.buttonAuthorizeListDrawer = true;
        this.$nextTick(() => {
          this.$refs.buttonAuthorizeList.init(this.moduleId, this.fullName);
        });
      } else if (activeTab === "columnAuthorize") {
        this.columnAuthorizeListDrawer = true;
        this.$nextTick(() => {
          this.$refs.ColumnAuthorizeList.init(
            this.moduleId,
            this.fullName,
            this.menuType
          );
        });
      } else if (activeTab === "formAuthorize") {
        this.formAuthorizeListDrawer = true;
        this.$nextTick(() => {
          this.$refs.FormAuthorizeList.init(
            this.moduleId,
            this.fullName,
            this.menuType
          );
        });
      } else if (activeTab === "dataAuthorize") {
        this.dataAuthorizeListDrawer = true;
        this.$nextTick(() => {
          this.$refs.DataAuthorizeList.init(
            this.moduleId,
            this.fullName,
            this.menuType
          );
        });
      } else if (activeTab === "roleAuthorize") {
        this.getRoleList();
      } else if (activeTab === "userAuthorize") {
        this.getUserList();
      }
    },
    //获取人员列表
    getUserList() {
      this.listLoading = true;
      getUserListByMenuId(this.moduleId, this.listQuery)
        .then((res) => {
          this.userTreeList = res.data.list;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    //获取角色列表
    getRoleList() {
      this.listLoading = true;
      getRoleListByMenuId(this.moduleId)
        .then((res) => {
          this.roleTreeList = res.data;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.jsbos-preview-main {
  overflow: hidden;
  overflow-x: hidden;
}
>>> .el-table__body-wrapper {
  height: 60vh !important;
  overflow-y: auto !important;
}
.tableContainer {
  flex: 1 0 0;
  height: 100%;
  overflow: unset !important;
}
</style>
